<!-- 我的祝福 -->
<template>
  <div class="page-container">
    <div class="list_module">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="finishedText"
          @load="onLoad"
        >
          <van-cell v-for="item in dataSource" :key="item.id" :title="item.title" />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { PullRefresh } from 'vant'
export default {
  components: {
    [PullRefresh.name]: PullRefresh
  },
  data() {
    return {
      searchParams: { // 查询参数
        page: 0, // 页码
        size: 20 // 每页条数
      },
      refreshing: false, // 下拉刷新load
      loading: false, // 加载load
      dataSource: [], // 数据源
      finished: false, // 是否已全部加载
      finishedText: '没有更多了' // 已加载所有提示
    }
  },
  mounted() {},
  methods: {
    // 下拉刷新
    onRefresh() {
      this.searchParams.page = 1
      this.getDataSource()
    },
    // 上拉加载更多
    onLoad() {
      this.searchParams.page++
      this.loading = true
      this.getDataSource()
    },
    // 获取数据
    getDataSource() {
      console.log('searchParams', this.searchParams)
      //
      const arr = []
      const len = this.searchParams.page === 1 ? 0 : this.dataSource.length
      for (let index = len; index < len + 20; index++) {
        arr.push({
          id: index,
          title: `祝福${index}`
        })
      }
      // 赋值
      if (this.searchParams.page === 1) {
        this.dataSource = arr
      } else {
        this.dataSource = [...this.dataSource, ...arr]
      }
      this.refreshing = false
      this.loading = false
      const total = this.searchParams.page * this.searchParams.size
      if (total >= 100) {
        this.finished = true
      } else {
        this.finished = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page-container {
  overflow: hidden;
  .list_module {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}
</style>

